<template>
  <div
    id="main-box"
    class="secondly-color"
  >
    <div id="title-box">
      <div
        id="title-element"
        class="anim pt-2"
        @click="$emit('clickTitle', value)"
      >
        {{ title == "" ? "DEFAULT TITLE" : title }}
      </div>
    </div>
    <div id="line"></div>

    <el-row
      id="content-box"
      :gutter="0"
      style="height: 10vmax"
    >
      <el-col
        :xs="10"
        :sm="8"
        :md="6"
        style="background-color: black"
        id="image-box"
      >
        <!-- <el-image
          id="image-element"
          src="/images/default.png"
          fit="cover"
          style="height: 10vmax; width: 100%"
        ></el-image> -->
        <UniCosImage
          class="w-h-full"
          :src="picture"
          :format="CosImgFormatSuffix.WEBP"
        ></UniCosImage>
      </el-col>
      <el-col
        :xs="14"
        :sm="16"
        :md="18"
        id="info-box"
        style="height: 10vmax"
      >
        <div id="text-box">
          <div id="text-element">
            {{ content }}
          </div>
          <!-- {{ content }} -->
        </div>
        <div id="tag-box">
          <el-tag
            type="info"
            effect="plain"
            v-for="item in tags"
            >{{ item }}</el-tag
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ElRow, UniCosImage } from "#components";
import { API } from "~/models/api";
import { CosImgFormatSuffix } from "~/models/cos";

defineProps({
  title: {
    type: String,
    default: "Title",
  },
  content: {
    type: String,
    default:
      "本文探讨现代科技与生活的融合，从智能家居到移动支付，每项创新都推动社会前行。",
  },
  tags: {
    type: Array,
    default: () => ["TAG A"],
  },
  picture: {
    type: String,
    default: API.DEFAULT_COS_IMAGE_URL,
  },
  value: {
    type: Object,
    default: () => {},
  },
});
</script>

<style scoped lang="scss">
#main-box {
  // background-color: var(--bg-secondly);
  border-radius: 0px 0px 1vmin 1vmin;
  -webkit-mask-image: linear-gradient(to right, black 30%, transparent 100%);
  mask-image: linear-gradient(to right, black 30%, transparent 100%);
  &:hover {
    -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
    mask-image: linear-gradient(to right, black 100%, transparent 100%);
  }
}
#title-box {
  & > #title-element {
    margin-left: 1vmin;
    margin-top: 0.6vmin;
    font-size: 2vmin;
    font-weight: bold;
    &:hover {
      color: var(--color-primary);
      cursor: pointer;
    }
  }
}
#line {
  height: 0.2vmin;
  background: linear-gradient(to right, var(--color), var(--bg));
}
#content-box {
  height: 10vmax;
  overflow: hidden;
  color: var(--color-secondly);
  font-style: italic;
  & #image-box {
    overflow: hidden;
  }
  & #image-element {
    // 这里能开启渐变
    opacity: 0.8;
    transition: all 0.3s ease;
    &:hover {
      opacity: 1;
      transform: scale(1.1);
      cursor: pointer;
      transition: all 0.3s ease;
    }
  }
}
#info-box {
  display: flex;
  flex-direction: column;
  & > #text-box {
    flex: 3;
    box-sizing: border-box;
    padding: 1.5vmin;
    font-size: 1.3vmin;
    text-indent: 2vmin;
    overflow: hidden;
    opacity: 0.8;
    &:hover {
      opacity: 1;
    }
    & > #text-element {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
  & > #tag-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding-left: 1vmin;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
